<template>
	<div id="settlement">
		<el-dialog :visible.sync="dialogVisible" width="60%">
			<el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
				<el-row v-if="adjustmentInfoTable=='insertTmp'">
					<el-col :span="24">
						<el-table ref="singleTable" :data="chelosslist" highlight-current-row style="width: 100%;">
							<el-table-column property="carId" label="车损编号">
							</el-table-column>
							<el-table-column property="carDanger" label="车损险别">
							</el-table-column>
							<el-table-column property="cplateNumber" label="车牌号">
							</el-table-column>
							<el-table-column property="carSubtotal" label="定损总额">
							</el-table-column>
						</el-table>
						<el-table ref="singleTable" :data="wulosslist" highlight-current-row style="width: 100%;">
							</el-table-column>
							<el-table-column property="matterId" label="物料编号">
							</el-table-column>
							<el-table-column property="matterDanger" label="物损险别">
							</el-table-column>
							<el-table-column property="matterSubtotal" label="定损总额">
							</el-table-column>
							<el-table-column>
							</el-table-column>
						</el-table>
						<el-table ref="singleTable" :data="renlosslist" highlight-current-row style="width: 100%;">
							<el-table-column property="usernumber" label="人伤编号">
							</el-table-column>
							<el-table-column property="userDanger" label="险别">
							</el-table-column>
							<el-table-column property="userName" label="伤者姓名">
							</el-table-column>
							<el-table-column property="userSubtotal" label="费用总额">
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				</br>
				<el-row>
					<div v-if="adjustmentInfoTable=='insertTmp'">
						<!-- <el-button @click="addAdjustment()">添加</el-button> -->
						<el-table :data="adjustmentInfos" style="width: 100%" ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55">
							</el-table-column>
							<el-table-column label="项目名称">
								<el-select disabled slot-scope="scope" v-model="scope.row.riskTypeId" placeholder="请选择" @change="riskTypesChange(scope.$index,scope.row.riskTypeId)">
									<el-option v-for="item in riskTypes" :key="item.riskTypeId" :label="item.riskTypeName" :value="item.riskTypeId">
									</el-option>
								</el-select>
							</el-table-column>
							<el-table-column prop="subtotal" label="损失金额">
							</el-table-column>
							<el-table-column prop="dutyRatio" label="责任免赔率">
							</el-table-column>
							<el-table-column prop="indemnifyMax" label="赔偿限额">
							</el-table-column>
							<el-table-column prop="practicalCompensate" label="应赔金额">
							</el-table-column>
							<!-- <el-table-column label="操作">
								<a href="#" slot-scope="scope" @click="removeAdjustment(scope.$index)">移除</a>
							</el-table-column> -->
						</el-table>
						<div style="margin-top: 20px">
							<el-button @click="toggleSelection()">取消选择</el-button>
						</div>
					</div>
					<div v-if="adjustmentInfoTable=='updateTmp'">
						<el-table :data="adjustmentInfos" style="width: 100%">
							<el-table-column label="项目名称">
								<el-select disabled slot-scope="scope" v-model="scope.row.projectId" placeholder="请选择" @change="riskTypesChange(scope.$index,scope.row.projectId)">
									<el-option v-for="item in riskTypes" :key="item.riskTypeId" :label="item.riskTypeName" :value="item.riskTypeId">
									</el-option>
								</el-select>
							</el-table-column>
							<el-table-column prop="amountOfLoss" label="损失金额">
							</el-table-column>
							<el-table-column prop="compensateMoney" label="赔付金额">
							</el-table-column>
							<el-table-column prop="practicalCompensate" label="实际赔付金额">
							</el-table-column>
							<el-table-column prop="settlementTime" label="理算时间">
							</el-table-column>
							<!-- <el-table-column label="操作">
								<a href="#" slot-scope="scope" @click="removeAdjustment(scope.$index)">移除</a>
							</el-table-column> -->
						</el-table>
					</div>
				</el-row>
				</br>
				<el-row>
					<el-col :span="12">
						<el-form-item label="银行卡号">
							<el-input v-model="form.cardNumber"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="理赔方式">
							<el-radio v-model="form.settlementWay" :label="1" border>转账</el-radio>
							<el-radio v-model="form.settlementWay" :label="2" border>现金</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="理赔进展">
							<el-input v-model="form.claimProgress"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="领取人">
							<el-input v-model="form.getPeople"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item label="实赔总金额">
							<el-input v-model="form.settlementMoney"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" @click="insertOrUpdateSettlement">确认</el-button>
							<el-button @click="dialogVisible=false">取消</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
		<el-dialog title="审核" :visible.sync="dialogVisible2" width="30%">
			<el-radio v-model="claimCheck" label="1">审核通过</el-radio>
			<el-radio v-model="claimCheck" label="2">审核不通过</el-radio>
			<el-button @click="updateClaimCheck">确定</el-button>
		</el-dialog>
		<el-container>
			<el-header>
				<el-row :gutter="20">
					<el-col :span="3">
						<div class="grid-content bg-purple">车险理赔系统</div>
					</el-col>
					<el-col :span="2" :offset="14">
						<div class=" bg-purple font1">欢迎您</div>
					</el-col>
					<el-col :span="2">
						<div class=" bg-purple font1">{{uname}}</div>
					</el-col>
					<el-col :span="2">
						<div class=" bg-purple font1"><a class="hover1" @click="exit">安全退出</a></div>
					</el-col>
				</el-row>
			</el-header>
			<el-main>
				<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm my-el-form1 ">
					<el-form-item label="理赔编码" prop="settlement_number">
						<el-input v-model="ruleForm.settlement_number"></el-input>
					</el-form-item>
					<el-form-item label="保单号" prop="warrantyId">
						<el-input v-model="ruleForm.warrantyId"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane label="理赔任务列表" name="first">
						<el-table ref="singleTable" :data="SettlementTaskList" highlight-current-row @current-change="handleCurrentChange"
						 style="width: 100%;height:325px">
							<el-table-column property="lossId" label="定损编号">
							</el-table-column>
							<el-table-column property="carName" label="车主姓名">
							</el-table-column>
							<el-table-column property="lossAddress" label="定损地点">
							</el-table-column>
							<el-table-column property="lossTime" label="定损时间">
							</el-table-column>
							<el-table-column property="lossSum" label="定损金额">
							</el-table-column>
							<el-table-column label="操作">
								<a href="#" slot-scope="scope" @click="insertButton(scope.row.lossId)">处理</a>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="理赔信息列表" name="two">
						<!-- <el-button type="primary" icon="el-icon-plus" @click="insertButton()" v-if="btnCheckJudge('insert')"></el-button> -->
						<el-button class="button" type="primary" icon="el-icon-edit" @click="updateButton()" v-if="btnCheckJudge('update')"></el-button>
						<!-- <el-button class="button" type="primary" icon="el-icon-delete" @click="deleteClaims"></el-button> -->
						<el-button class="button" type="primary" @click="dialogVisible2 = true" v-if="btnCheckJudge2('check')">理赔审核</el-button>
						<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%;height:325px">
							<el-table-column property="settlementNumber" label="理赔编号">
							</el-table-column>
							<el-table-column property="acase.caseId" label="保单号">
							</el-table-column>
							<el-table-column label="理赔审核">
								<td slot-scope="scope">{{disClaimCheck(scope.row.claimCheck)}}</td>
							</el-table-column>
							<el-table-column property="claimProgress" label="理赔进展">
							</el-table-column>
							<el-table-column property="surveyLoss.carframeId" label="车架号">
							</el-table-column>
							<el-table-column property="getPeople" label="领取人">
							</el-table-column>
							<el-table-column property="settlementMoney" label="赔付金额">
							</el-table-column>
							<el-table-column label="理赔方式">
								<td slot-scope="scope">{{disSettlementWay(scope.row.settlementWay)}}</td>
							</el-table-column>
							<el-table-column property="warranty.permissionTime" label="签单时间">
							</el-table-column>
							<el-table-column property="warranty.closeCaseTime" label="结案时间">
							</el-table-column>
							<el-table-column label="案件状态">
								<td slot-scope="scope">{{disWarrCaseState(scope.row.warranty.caseState)}}</td>
							</el-table-column>
						</el-table>
						<el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="handleCurrentChange2">
						</el-pagination>
					</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'insured',
		mounted() {
			//sessionStorage.setItem("userId", 1); //测试代码
			this.getSettlement();
			this.$axios.get("getMenuButton?uid=" + sessionStorage.getItem("userId") + "&jpid=0").then(res => {
				this.btnCheck = res.data;
			});
			this.$axios.get("getMenuButton?uid=" + sessionStorage.getItem("userId") + "&jpid=" + this.$route.query.jno).then(res => {
				this.btnChecka = res.data;
			});
			// this.btnCheck = ['insert', 'update', 'check'] //测试代码
			// this.btnChecka = ['insert', 'update', 'check'] //测试代码
			this.getSettlementTask();
		},
		data() {
			return {
				btnCheck: [],
				btnChecka: [],
				uname: sessionStorage.getItem("userName"),
				ruleForm: {
					settlement_number: '',
					warrantyId: ''
				},
				activeName: 'first',
				tableData: [],
				claims: null,
				dialogVisible: false,
				dialogVisible2: false,
				claimCheck: "1",
				page: 0,
				total: 0,
				pageSize: 4,
				form: {
					settlementNumber: '',
					cardNumber: '',
					settlementWay: '',
					claimProgress: '',
					getPeople: '',
					settlementMoney: ''
				},
				lossDetermination: null,
				adjustmentInfos: null,
				riskTypes: null,
				adjustmentInfoTable: '',
				SettlementTaskList: null,
				chelosslist: [],
				wulosslist: [],
				renlosslist: [],
				lossId: null,
				multipleSelection: [],
				insuranceObject:null
			};
		},
		methods: {
			getSettlement() {
				this.$axios.get("getSettlement?userId=" + sessionStorage.getItem("userId") + "&page=" + this.page).then(res => {
					this.total = res.data.total;
					this.tableData = res.data.list;
				});
			},
			submitForm(formName) {
				this.page = 0;
				if (this.ruleForm.settlement_number == '' && this.ruleForm.warrantyId == '') {
					this.getSettlement();
					return;
				}
				this.$axios.get("getSettlementCond", {
					params: {
						userId: sessionStorage.getItem("userId"),
						settlement_number: this.ruleForm.settlement_number,
						warrantyId: this.ruleForm.warrantyId,
						page: this.page
					}
				}).then(res => {
					this.total = res.data.total;
					this.tableData = res.data.list;
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			handleCurrentChange(val) {
				this.claims = val;
			},
			handleCurrentChange2(val) {
				this.page = val;
				this.getSettlement();
			},
			exit() {
				sessionStorage.clear();
				this.$router.push("/login");
			},
			deleteClaims() {
				this.$axios.post("deleteClaims", {
					settlementNumber: this.claims.settlementNumber
				}).then(res => {
					if (res.data > 0) {
						this.$notify({
							title: '删除成功!',
							type: 'success'
						});
						this.getSettlement();
						return;
					}
				});
			},
			updateClaimCheck() {
				if (this.claims == null) {
					this.$message('未选择理赔对象');
					return;
				};
				this.$axios.post("updateClaimCheck", {
					settlementNumber: this.claims.settlementNumber,
					caseId: this.claims.acase.caseId,
					claimCheck: this.claimCheck
				}).then(res => {
					if (res.data == 0) {
						this.$message('审核失败');
						return;
					}
					this.$message({
						message: '审核成功!',
						type: 'success'
					});
					this.getSettlement();
					this.dialogVisible2 = false;
				});
			},
			disClaimCheck(claimCheck) {
				if (claimCheck == 1) {
					return "审核通过";
				} else if (claimCheck == 2) {
					return "暂存";
				} else if (claimCheck == 3) {
					return "注销";
				} else {
					return "待审核";
				}
				return "";
			},
			disSettlementWay(settlementWay) {
				if (settlementWay == 1) {
					return "转账";
				} else if (settlementWay == 2) {
					return "现金";
				}
				return "";
			},
			disWarrCaseState(caseState) {
				if (caseState == 1) {
					return "予以立案";
				} else if (caseState == 2) {
					return "撤案";
				} else if (caseState == 3) {
					return "注销";
				} else if (caseState == 4) {
					return "结案";
				}
				return "";
			},
			insertButton(lossId) {
				this.lossId = lossId;
				this.adjustmentInfoTable = "insertTmp";
				this.dialogVisible = true;
				this.form = {
					settlementNumber: '',
					cardNumber: '',
					settlementWay: '',
					claimProgress: '',
					getPeople: '',
					settlementMoney: ''
				};
				this.getRiskTypeAll();
				this.$axios.get("settlementMap?option=1&lossId=" + lossId).then(res => {
					this.lossDetermination = res.data.lossDetermination;
					this.chelosslist = this.lossDetermination.chelosslist;
					this.wulosslist = this.lossDetermination.wulosslist;
					this.renlosslist = this.lossDetermination.renlosslist;
					this.adjustmentInfos = res.data.adjustmentInfos;
					this.insuranceObject=this.adjustmentInfos[0];
					this.adjustmentInfos.splice(0, 1);
				});
			},
			updateButton() {
				if (this.claims == null) {
					this.$message('未选择修改对象');
					return;
				};
				this.adjustmentInfoTable = "updateTmp";
				this.dialogVisible = true;
				this.getRiskTypeAll();
				this.$axios.get("settlementMap?option=2&settlement_number=" + this.claims.settlementNumber + "&userId=" +
					sessionStorage.getItem("userId")).then(res => {
					this.lossDetermination = res.data.lossDetermination;
					this.adjustmentInfos = res.data.adjustmentInfos;
					var settlementObject = res.data.settlementObject;
					this.form = {
						settlementNumber: settlementObject.settlementNumber,
						cardNumber: settlementObject.cardNumber,
						settlementWay: settlementObject.settlementWay,
						claimProgress: settlementObject.claimProgress,
						getPeople: settlementObject.getPeople,
						settlementMoney: settlementObject.settlementMoney
					};
				});
			},
			insertOrUpdateSettlement() {
				var json = this.form;
				json.lossId = this.lossId;
				this.adjustmentInfos.push(this.insuranceObject);
				json.adjustmentInfos = this.adjustmentInfos;
				if (this.form.settlementNumber == '') {
					this.$axios.post("insertClaims", json).then(res => {
						this.$message({
							message: '新增成功!',
							type: 'success'
						});
						this.getSettlementTask();
						this.getSettlement();
						this.dialogVisible = false;
					});
					return;
				}
				this.$axios.post("updateClaims", json).then(res => {
					this.$message({
						message: '修改成功!',
						type: 'success'
					});
					this.getSettlement();
					this.dialogVisible = false;
				});
			},
			btnCheckJudge(val) {
				for (var i = 0; i < this.btnCheck.length; i++) {
					if (this.btnCheck[i] == val) return true;
				}
				return false;
			},
			btnCheckJudge2(val) {
				for (var i = 0; i < this.btnChecka.length; i++) {
					if (this.btnChecka[i] == val) return true;
				}
				return false;
			},
			removeAdjustment(index) {
				this.adjustmentInfos.splice(index, 1);
			},
			addAdjustment() {
				this.adjustmentInfos.push({
					settlementNumber: '',
					cardNumber: '',
					settlementWay: '',
					claimProgress: '',
					getPeople: '',
					settlementMoney: ''
				});
			},
			getRiskTypeAll() {
				this.$axios.get("getRiskTypeAll").then(res => {
					this.riskTypes = res.data;
				});
			},
			riskTypesChange(index, riskTypeId) {
				this.$axios.get("getAdjustmentInfo", {
					params: {
						userId: sessionStorage.getItem("userId"),
						riskTypeId: riskTypeId
					}
				}).then(res => {
					this.adjustmentInfos.splice(index, 1, res.data);
				});
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			getSettlementTask(){
				this.$axios.get("getSettlementTask?userId=" + sessionStorage.getItem("userId")).then(res => {
					this.SettlementTaskList = res.data;
				});
			}
		}
	};
</script>

<style scoped>
	.el-header {
		text-align: center;
		line-height: 60px;
	}


	.el-container {
		margin-left: 8px;
	}

	.el-header {
		padding: 0 0;
		border: #A8A8A8 1px solid;
		border-bottom: 0px;
		background-color: white;
	}

	.el-main {
		background-color: white;
		border: #A8A8A8 1px solid;
	}

	.font1 {
		color: #545C64;
		font-size: 14.2px;
	}

	.my-el-form1 {
		display: flex;
		border: #A8A8A8 1px solid;
		padding-top: 20px;
	}

	.el-form-item {
		width: 400px;
	}

	.el-tabs {
		margin-top: 9px;
	}

	.button {
		margin-left: 41px;
	}

	.hover1:hover {
		color: blue;
	}
</style>
